<template>
  <div class="demo-container">
    <g-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess">copy</g-button>
    <van-field
      v-model="value"
      label="文本"
      placeholder="输入框内容右对齐"
      input-align="right"
    />

    <van-button type="info" @click="storeClick">新增store数据</van-button>
    <g-divider :height="5" class="g-divider" />
    <van-button type="info" @click="errorClick">错误</van-button>

    <van-cell v-for="(item, i) in labourUnion" :key="i" :title="item" />

    <g-title title="热门资讯1111" line class="tit" color="#EB2415" />
    <g-list
      :src="src"
      double
      title="呵护“心家园”，激发“心动力”—— 2021年度上海金融系统职场“心理加油站”系列课程"
      date="2018-11-07"
      zan="8991赞"
      ping="6661评"
    />

    <g-title title="热门资讯" line class="tit" font-color="#EB2415" line-color="#EB2415" />

    <g-list
      :src="src"
      double
      title="呵护“心家园”，激发“心动力”—— 2021年度上海金融系统职场“心理加油站”系列课程"
      date="2018-11-07"
      zan="8991"
      ping="6661"
    />
    <g-list
      src="https://djimg.gobestsoft.cn/upload1/20210609/d7bc3c779b8c4fbaa8244fd9d2990064.jpg?imageView2/0/w/252/h/190"
      title="工商｜传承雷锋精神，青年志愿同行 呵护“心家园”，激发“心动力”—— 2021年度上海金融系统职场“心理加油站”系列课程"
      date="2018-11-07"
      zan="8991"
      ping="6661"
    />
    <g-list
      :src="src"
      img-ori="right"
      title="工商｜传承雷锋精神，青年志愿同行 呵护“心家园”，激发“心动力”—— 2021年度上海金融系统职场“心理加油站”系列课程"
      date="2018-11-07"
      zan="8991"
      ping="6661"
    />
    <g-list
      :src="src"
      img-ori="left"
      title="工商｜传承雷锋精神，青年志愿同行 呵护“心家园”，激发“心动力”—— 2021年度上海金融系统职场“心理加油站”系列课程"
      date="2018-11-07"
      zan="8991"
      ping="6661"
    />
    <g-list :src="src" img-ori="left" class="list">
      <template v-slot:txt>
        <h3 fz14>国际音乐日-音乐鉴赏会</h3>
      </template>
    </g-list>
    <g-list img-ori="right" class="list" @click.native="goArticleDetail">
      <template v-slot:txt>
        <h3 fz16 ellipsis2>
          国际音乐日-音乐鉴赏会国际音乐日-音乐鉴赏会国际音乐日-音乐鉴赏会国际音乐日-音乐鉴赏会国际音乐日-音乐鉴赏会国际音乐日-音乐鉴赏会
        </h3>
        <div class="address" fz12>
          <i class="iconfont icon-detailpage_icon_address" />
          北京市通州区运河东大街56号院7号楼
        </div>
        <div class="time" fz12>
          <i class="iconfont icon-detailpage_icon_date" />
          北京市通州区运河东大街56号院7号楼
        </div>
      </template>
    </g-list>
    <g-list :src="src" double img-ori="left">
      <template v-slot:txt>
        <h1>Here might be a page title</h1>
      </template>
      <template v-slot:bottom>
        <h1>bottombottombottom</h1>
      </template>
    </g-list>
    <div class="demo-mixin">{{ date | timeAgo }}</div>
    <div class="demo-mixin">{{ num | numberFormatter(2) }}</div>
    <div class="demo-mixin">{{ str | uppercaseFirst }}</div>
    <div class="demo3" radius10 fz20 bg1 ellipsis2>建朗科技建朗科技建朗科技建朗科技建朗科技建朗科技建朗科技</div>
    <div ref="kv" class="demo3" style="color: #009" radius3 fz20 bg1 ellipsis2 @click="checkClass">检查一个元素里是否有这个class</div>
    <div ref="cmm" class="demo3" radius5 fz20 bg1 ellipsis2 @click="addClass">新增class</div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
import waves from '@/directive/waves/index.js' // use waves by v-directive
import { Toast } from 'vant'
import { parseTime,
  uniqueArr,
  createUniqueString,
  hasClass,
  addClass,
  regEmail,
  regMobile,
  getExplorer,
  getStyle,
  setStyle,
  formatTime,
  getQueryObject,
  byteLength,
  cloneArray,
  param,
  objectMerge,
  getTime
} from '@/utils'
export default {
  name: 'Demo',
  directives: {
    clipboard,
    waves
  },
  data() {
    return {
      src: '//www.source.hljgh.org.cn:31001/group1/M00/0B/FB/CoJnS2CwSFiAFJrqAAIj6WldXYw61.jpeg',
      inputData: '建朗科技测试1',
      value: '',
      date: 1621245335,
      num: 123456789101112131415,
      str: 'asdfasfd23qreqwetfewtrq34radfqr'
    }
  },
  computed: {
    ...mapState([
      'labourUnion'
    ])
  },
  created() {
    const now = new Date()
    const time = parseTime(now, ('{y}-{m}-{d} {h}:{i}'))
    const fTime = formatTime('1623899010000')
    const objA = {
      name: 'cmm',
      city: 'sh'
    }
    const objB = {
      a: 'ccc',
      b: 'asdf',
      name: 'mzd'
    }
    console.log('time: ', time)
    console.log('fTime: ', fTime)
    console.log('uniqueArr: ', uniqueArr(['a', 'a', 1, 3, 3, 4, 'b']))
    console.log('createUniqueString: ', createUniqueString())
    console.log('regEmail: ', regEmail('95123456@qq.com'))
    console.log('regMobile: ', regMobile('12345678912'))
    console.log('getExplorer: ', getExplorer())
    console.log('getQueryObject: ', getQueryObject('https://www.npmjs.com?name=q&age=18'))
    console.log('byteLength: ', byteLength('as32456879^&*(dfa按时'))
    console.log('cloneArray: ', cloneArray([1, 2, 3, 4, [2, 4, 3], 'a', 'b']))
    console.log('param: ', param({ 'a': 'a', 'b': 'b' }))
    console.log('objectMerge: ', objectMerge(objA, objB))
    console.log('getTime: ', getTime('start'))
    console.log('getTime: ', getTime())
  },
  methods: {
    ...mapMutations(['ADD_LAB']),
    checkClass() {
      const el = this.$refs.kv
      setStyle(el, 'width', '600px')
      console.log('el: ', el)
      console.log('hasClass: ', hasClass(el, 'demo3'))
      console.log('getStyle: ', getStyle(el, 'font-size'))
    },
    addClass() {
      const el = this.$refs.cmm
      addClass(el, 'jianlang')
    },
    clipboardSuccess() {
      Toast.success('Copy successfully')
    },
    storeClick(e) {
      e => e.preventDefault()
      const timestamp = new Date().getTime()
      this.ADD_LAB(timestamp)
    },
    goArticleDetail() {
      this.$router.push('/articleDetail/17')
    },
    errorClick() {
      window.someVar.error = 'error'
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-mixin {
  @include borderRadius(10px);
  @include wh(100px, 200px);
  background: #909;
  color: $fc;
}
.demo3{
  width: 100px;
  height: 100px;
  background: #009;
  line-height: 50px;
}
</style>
